import Taro ,{ Component } from '@tarojs/taro'
import { View , Swiper , SwiperItem , Image} from '@tarojs/components'

import './shopList.scss'

import ShopItem from '../../component/ShopItem/shopItem.js'

import postImage from '../../image/post.png'

import DataManager from '../../utils/DataManager.js'
import ListEmptyView from '../../component/LiseEmptyView/listEmptyView.js'
import emptyIcon from '../../image/ic_empty.png'

import {base_url} from "../../network/config";
import BasePage from "../basePage";
import {COMMON_CONST} from "../../utils/const";

let mPageNum = 1;

export default class shopList extends BasePage {
  config = {
    navigationBarTitleText: ''
  }

  constructor() {
    super(...arguments)
    this.state = {
      list: [],
      shopBannerList:[],
      bannerHeight:0
    }
  }

  componentDidMount () {
    Taro.setNavigationBarTitle({
      title: DataManager.getAddressName() + '商家列表'
    })

    Taro.eventCenter.on('shopInfoPost',() => {
      mPageNum = 1;
      this.loadShopList(mPageNum)
    })

    this.loadShopList(1)
    this.loadBannerList()

  }

  onPullDownRefresh(){
    mPageNum = 1;
    this.loadShopList(mPageNum);
    this.loadBannerList();
  }

  onReachBottom(){
    mPageNum ++;
    this.loadShopList(mPageNum)
  }

  loadShopList(pageNo){
    console.log('loadpage------------' + pageNo)

    let _this = this;
    let url = base_url + 'stateless/business/businessNewsList'
    Taro.request({
      url:url,
      data: {
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'c',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        pageNo: pageNo,
        pageSize: COMMON_CONST.LIST_SIZE
      },
      method: 'GET',
      success(res) {
        if (!res.data || !res.data.data || !res.data.data.list || res.data.data.list.length < 1){
          if (mPageNum > 1){
            mPageNum --;
          }
        }

        if (!res || !res.data || !res.data.data || !res.data.data.list){
          return
        }

        let shops = [];
        if (pageNo == 1){
          shops = res.data.data.list;
        } else {
          shops = _this.state.list.concat(res.data.data.list)
        }

        _this.setState({
          list: shops
        })
      } ,
      fail: function () {
        if (mPageNum > 1){
          mPageNum --;
        }
      },
      complete:function(){
        Taro.stopPullDownRefresh();
      }
    })
  }

  loadBannerList(){
    let _this = this;

    let url = base_url + 'stateless/banner/bannerList'
    Taro.request({
      url:url,
      data: {
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'c',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        type:4
      },
      method: 'GET',
      success(res) {
        let banners = [];
        if (res.data.data){
          banners = banners.concat(res.data.data);
        }
        _this.setState({
          shopBannerList:banners,
        })
      }
    })
  }

  handlePostClick = () =>{
    Taro.navigateTo({
      url: '/pages/post/shopInfoPost'
    })
  }

  handleBannerClick = (bannerData) =>{
    console.log('banner--click =====' + bannerData.businessType + '    ' + bannerData.businessId)
    let businessId = bannerData.businessId;
    let bannerUrl = bannerData.bannerUrl;
    if (businessId){
      if (bannerData.businessType == 2){ // job
        Taro.navigateTo({
          url: `/pages/job/jobDetail?jobId=` + businessId,
        })
      } else if (bannerData.businessType == 3){// car
        Taro.navigateTo({
          url: `/pages/car/carDetail?carId=` + businessId
        })
      } else if (bannerData.businessType == 4){// shop
        Taro.navigateTo({
          url: `/pages/shop/shopDetail?shopId=` + businessId
        })
      }
    }

    if (bannerUrl && (bannerData.businessType == 0 || bannerData.businessType == 1)){
      Taro.navigateTo({
        url: `/pages/common/commonWebPage?webUrl=` + bannerUrl + `&webTitle=` + bannerData.title
      })
    }
  }

  bannerLoad = (e) =>{
    var winWid = Taro.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var winHei = Taro.getSystemInfoSync().windowHeight;
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;//图片宽度

    var swiperH = winWid * imgh / imgw + 'px'
    console.log('img------------' + winWid + '    ' + winHei + '       ' + swiperH  )
    this.setState({
      bannerHeight:swiperH
    })
  }

  render() {

    let bannerItem = this.state.shopBannerList.map(item => {
      return <SwiperItem>
        <Image
          onLoad={this.bannerLoad.bind(this)}
          className='shop-list-banner-item'
          src={item.bannerImage}
          mode='widthFix'
          style='height:{{this.state.bannerHeight}};'
          onClick={this.handleBannerClick.bind(this , item)}
        >

        </Image>
      </SwiperItem>
    })

    return (
      <View className='shop-list-main-container'>
        {this.state.shopBannerList.length > 0 ?
          <Swiper
            className='shop-banner'
            slideMult='10'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            duration={500}
            interval={2000}
            circular={this.state.shopBannerList.length > 1}
            autoplay
            indicatorDots
          >
            {bannerItem}
          </Swiper> : null
        }
        <View className='shop-list-divider'></View>
        <View className='shop-list-container'>
          {this.state.list.length > 0 ? this.state.list.map(item => {
            return (<ShopItem className='shop-list-item' shopData={item}></ShopItem>)
          })
          :
          <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon}/>
          }
        </View>
        <View className='post-entry' >
          <Image  src={postImage} style='width:50px; height:50px;position:relative' onClick={this.handlePostClick.bind(this)} />
        </View>
      </View>
    )
  }

}
